<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom操作</title>
</head>
<body>
    <ul id="ul1"><li id="li1">Java</li><li id="li2">CSS</li><li id="li3">ORACLE</li><li id="li4">RedHat</li><li id="li5">MySql</li></ul>

<button onclick="getByIdFun()">通过id获取元素</button>
<button onclick="getTagNameFun()">通过TagName获取</button>
<button onclick="ParentNodeFun()">通过父节点获取同级元素</button>
<button onclick="previousSiblingFun()">获取上一个兄弟节点</button>
<button onclick="nextSiblingFun()">获取下一个兄弟节点</button>
<button onclick="childNodesFun()">通过子节点获取元素</button>
<button onclick="firstChildFun()">firstChild获取元素</button>
<button onclick="lastChildFun()">lastChild获取元素</button>
<button onclick="createNodeFun()">创建节点放在末尾</button>
<button onclick="createNod2eFun()">创建节点放在指定位置</button>
<button onclick="replaceNodeFun()">替换节点</button>
<button onclick="removeNodeFun()">删除节点</button>
</body>
</html>
<script>
    function getByIdFun() {
        var lis = document.getElementById("ul1");
        console.log(lis.innerText);
    }

    function getByNameFun() {
        var lis = document.getElementsByTagName("li");
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i].innerHTML);
        }
    }

    function ParentNodeFun() {
        var li1 = document.getElementById("li1");
        console.log(li1.parentNode.innerHTML);
    }

    function previousSiblingFun() {
        var li2 = document.getElementById("li2");
        console.log(li2.previousSibling.innerText);
    }

    function nextSiblingFun() {
        var li2 = document.getElementById("li2");
        console.log(li2.nextSibling.innerText);
    }

    function childNodesFun() {
        var ul1 = document.getElementById("ul1");
        var lisNode = ul1.childNodes;
        console.log(lisNode);
        for (var i = 0; i < lisNode.length; i++) {
            console.log(lisNode[i].innerHTML);
        }
    }

    function firstChildFun() {
        var ul1 = document.getElementById("ul1");
        var nodes = ul1.firstChild.innerHTML;
        console.log(nodes);
    }

    function lastChildFun() {
        var ul1 = document.getElementById("ul1");
        var nodes = ul1.lastChild.innerHTML;
        console.log(nodes);
    }

    function createNodeFun() {
        //创建一个li节点
        var li = document.createElement("li");
        li.innerHTML="pythonweb";
        //挂载li节点 在ul里面
        var ul1 = document.getElementById("ul1");
        ul1.appendChild(li);
    }

    function createNod2eFun() {
        //创建一个li节点
        var li = document.createElement("li");
        li.innerHTML="人工智能";
        //挂载li节点 在ul里面
        var ul1 = document.getElementById("ul1");
        //选中位置
        var li3 = document.getElementById("li3");
        ul1.appendChild(li);
        //将创建的元素发在某某之前
        ul1.insertBefore(li,li3);
    }

    function replaceNodeFun() {
        var li = document.createElement("li");
        li.innerText = "spring";
        var ul1 = document.getElementById("ul1");
        var li3 = document.getElementById("li3");
        ul1.replaceChild(li,li3);
    }

    function removeNodeFun() {
        var ul1 = document.getElementById("ul1");
        var li3 = document.getElementById("li3");
        ul1.removeChild(li3);
    }
</script>